<template>
    <div>
        <Echart
                :options="options"
                id="bottomLeftChart"
                height="4.9rem"
                width="100%"
                :transFlag="this.transFlag"
        ></Echart>
    </div>
</template>

<script>
    import Echart from '@/common/echart'
    import eventBus from "@/views/event-bus"

    let cat = new Array();
    for (let i = 0; i <= 100; i++) {
        cat[i] = i;
    }
    export default {
        data() {
            return {
                transFlag: true,
                options: {},
                info: {
                    btroptimizalValues: [],
                    btrinferenceValues: [],
                }
            };
        },
        components: {
            Echart,
        },
        props: {},
        mounted() {
            eventBus.$on('data-figure', info => {
                this.info = info;
            })
        },
        watch: {
            info: {
                handler() {
                    this.options = {
                        title: {
                            text: "",
                        },
                        tooltip: {
                            trigger: "axis",
                            backgroundColor: "rgba(255,255,255,0.1)",
                            axisPointer: {
                                type: "shadow",
                                label: {
                                    show: true,
                                    backgroundColor: "#7B7DDC"
                                }
                            }
                        },
                        legend: {
                            data: ["控制前", "控制后"],
                            textStyle: {
                                color: "#B4B4B4"
                            },
                            top: "0%"
                        },
                        grid: {
                            x: "8%",
                            width: "88%",
                            y: "4%"
                        },
                        xAxis: {
                            name: '序号',
                            data: cat,
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis:
                            {
                                splitLine: {show: false},
                                axisLine: {
                                    lineStyle: {
                                        color: "#B4B4B4"
                                    }
                                },
                                scale: true,
                                axisLabel: {
                                    formatter: "{value} "
                                }
                            },
                        series: [
                            {
                                name: "控制前",
                                type: "line",
                                smooth: true,
                                showAllSymbol: true,
                                symbol: "emptyCircle",
                                symbolSize: 5,
                                itemStyle: {
                                    normal: {
                                        color: "#d73bf5"
                                    }
                                },
                                data: this.info.btrinferenceValues
                            },
                            {
                                name: "控制后",
                                type: "line",
                                smooth: false,
                                showAllSymbol: true,
                                symbol: "emptyCircle",
                                symbolSize: 5,
                                itemStyle: {
                                    normal: {
                                        lineStyle:{
                                            type:'dotted'
                                        },
                                        color: "#62f542"
                                    }
                                },
                                data: this.info.btroptimizalValues
                            }
                        ]
                    }
                },
                immediate: true,
                deep: true
            },
        },
    }
</script>